<template>
	<view class="distribution-center">
		<!-- 头部信息 -->
		<view class="header-section">
			<view class="balance-card">
				<view class="balance-item">
					<text class="value">{{ dashboard.balance || '0.00' }}</text>
					<text class="label">可提现余额 (元)</text>
				</view>
				<view class="balance-item">
					<text class="value">{{ dashboard.total_commission || '0.00' }}</text>
					<text class="label">累计收益 (元)</text>
				</view>
				<view class="balance-item">
					<text class="value">{{ dashboard.team_count || '0' }}</text>
					<text class="label">团队成员</text>
				</view>
			</view>
			<button class="withdraw-button" @click="openWithdrawPopup">立即提现</button>
		</view>

		<!-- 邀请码 -->
		<view class="card-section referral-section">
			<view class="card-title">我的邀请信息</view>
			<view class="referral-code-wrapper">
				<text class="code">{{ dashboard.referral_code || '------' }}</text>
				<button class="copy-button" size="mini" @click="copyText(dashboard.referral_code)">复制</button>
			</view>
			<view class="referral-link-wrapper">
				<text class="link">{{ dashboard.share_url || '------' }}</text>
				<button class="copy-button" size="mini" @click="copyText(dashboard.share_url)">复制链接</button>
			</view>
		</view>

		<!-- 营销素材 -->
		<view class="card-section material-section">
			<view class="card-title">一键复制营销素材</view>
			<view class="material-tabs">
				<view 
					class="tab-item" 
					:class="{ active: currentTab === index }"
					v-for="(tab, index) in marketingTabs" 
					:key="index"
					@click="switchTab(index)"
				>
					{{ tab.name }}
				</view>
			</view>
			<view class="material-content">
				<text class="material-text">{{ currentMarketingText }}</text>
			</view>
			<button class="copy-material-button" @click="copyText(currentMarketingText)">复制文案</button>
		</view>

		<!-- 推广海报 -->
		<view class="card-section poster-section">
			<view class="card-title">专属推广海报</view>
			<view class="poster-preview">
				<image class="poster-image" :src="posterUrl" mode="aspectFit"></image>
			</view>
			<view class="poster-actions">
				<button class="poster-btn" @click="savePoster">保存海报</button>
				<button class="poster-btn" @click="sharePoster">分享海报</button>
			</view>
		</view>

		<!-- 收益明细 -->
		<view class="card-section earnings-section">
			<view class="card-title">收益明细</view>
			<view class="earnings-list">
				<view class="earnings-item" v-for="(item, index) in earningsList" :key="index">
					<view class="earnings-info">
						<text class="earnings-title">{{ item.title }}</text>
						<text class="earnings-time">{{ item.time }}</text>
					</view>
					<text class="earnings-amount" :class="{ positive: item.amount > 0 }">
						{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
					</text>
				</view>
			</view>
		</view>
		
		<!-- 提现弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<text class="popup-title">申请提现</text>
				<view class="popup-balance">
					<text>可提现余额：¥{{ dashboard.balance || '0.00' }}</text>
				</view>
				<input class="popup-input" v-model="withdrawalAmount" type="digit" placeholder="请输入提现金额" />
				<view class="popup-tips">
					<text>最低提现金额：¥50</text>
				</view>
				<view class="popup-buttons">
					<button class="popup-button cancel" @click="closePopup">取消</button>
					<button class="popup-button confirm" @click="submitWithdrawal">确认</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dashboard: {},
				withdrawalAmount: '',
				currentTab: 0,
				marketingTabs: [
					{ name: '朋友圈文案', type: 'moments' },
					{ name: '微信群文案', type: 'group' },
					{ name: '一对一推荐', type: 'personal' }
				],
				marketingTexts: {
					moments: '【爆款推荐】我刚发现一个AI智能学习神器，能聊天、能教英语、还能辅导作业！现在299元就能抢到，还送价值2226元的鄂尔多斯旅游年卡，太划算了！快来看看吧 -> ',
					group: '【AI智能童伴】299元抢购AI学习机，送2226元旅游卡！孩子学习好帮手，家长省心神器！限时特惠，手慢无！',
					personal: '朋友，我发现一个超值的AI学习产品，299元就能买到AI智能童伴学习机，还送价值2226元的鄂尔多斯旅游年卡，特别适合有孩子的家庭，推荐给你！'
				},
				earningsList: [
					{
						title: '推荐好友购买',
						time: '2024-01-15 14:30',
						amount: 50.00
					},
					{
						title: '提现',
						time: '2024-01-10 16:20',
						amount: -100.00
					},
					{
						title: '推荐好友购买',
						time: '2024-01-08 09:15',
						amount: 50.00
					}
				],
				posterUrl: '/static/images/poster-template.png'
			};
		},
		computed: {
			currentMarketingText() {
				const currentType = this.marketingTabs[this.currentTab].type;
				return this.marketingTexts[currentType] + (this.dashboard.share_url || '');
			}
		},
		onLoad() {
			this.getDashboardData();
		},
		methods: {
			getDashboardData() {
				uni.showLoading({ title: '加载中...' });
				uni.request({
					url: 'https://ai.huixinqi.cn/app/aihaowu/distribution/dashboard',
					method: 'GET',
					header: {
						'Authorization': `Bearer ${uni.getStorageSync('user_token')}`
					},
					success: (res) => {
						if (res.data.code === 0) {
							this.dashboard = res.data.data;
						} else {
							uni.showToast({ title: res.data.msg, icon: 'none' });
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			switchTab(index) {
				this.currentTab = index;
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({ title: '复制成功', icon: 'success' });
					}
				});
			},
			savePoster() {
				uni.showToast({ title: '海报保存功能开发中', icon: 'none' });
			},
			sharePoster() {
				uni.showToast({ title: '海报分享功能开发中', icon: 'none' });
			},
			openWithdrawPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			submitWithdrawal() {
				if (!this.withdrawalAmount || this.withdrawalAmount <= 0) {
					uni.showToast({ title: '请输入正确的金额', icon: 'none' });
					return;
				}
				
				if (this.withdrawalAmount < 50) {
					uni.showToast({ title: '最低提现金额为50元', icon: 'none' });
					return;
				}
				
				if (this.withdrawalAmount > this.dashboard.balance) {
					uni.showToast({ title: '提现金额不能超过可提现余额', icon: 'none' });
					return;
				}
				
				uni.showLoading({ title: '提交中...' });
				uni.request({
					url: 'https://ai.huixinqi.cn/app/aihaowu/distribution/withdraw',
					method: 'POST',
					header: {
						'Authorization': `Bearer ${uni.getStorageSync('user_token')}`
					},
					data: {
						amount: this.withdrawalAmount
					},
					success: (res) => {
						uni.showToast({ title: res.data.msg, icon: res.data.code === 0 ? 'success' : 'none' });
						if (res.data.code === 0) {
							this.closePopup();
							this.withdrawalAmount = '';
							this.getDashboardData(); // 刷新数据
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style scoped>
.distribution-center {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.header-section {
	background: linear-gradient(to right, #ff9a44, #ff5f6d);
	padding: 40rpx;
	border-radius: 20rpx;
	color: white;
	text-align: center;
}

.balance-card {
	display: flex;
	justify-content: space-around;
	margin-bottom: 30rpx;
}

.balance-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.value {
	font-size: 48rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.label {
	font-size: 24rpx;
	opacity: 0.9;
}

.withdraw-button {
	background-color: white;
	color: #e53935;
	border: none;
	border-radius: 50rpx;
	padding: 20rpx 40rpx;
	font-weight: bold;
	font-size: 28rpx;
}

.card-section {
	background-color: white;
	padding: 30rpx;
	border-radius: 20rpx;
	margin-top: 20rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	color: #333;
}

.referral-code-wrapper, .referral-link-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #f5f5f5;
	padding: 20rpx;
	border-radius: 10rpx;
	margin-top: 15rpx;
}

.code {
	font-size: 36rpx;
	font-weight: bold;
	color: #e53935;
}

.link {
	font-size: 24rpx;
	color: #666;
	flex: 1;
	margin-right: 20rpx;
	word-break: break-all;
}

.copy-button {
	background-color: #e53935;
	color: white;
	border: none;
	border-radius: 8rpx;
	padding: 10rpx 20rpx;
	font-size: 24rpx;
}

.material-tabs {
	display: flex;
	margin-bottom: 20rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #666;
	border-bottom: 4rpx solid transparent;
}

.tab-item.active {
	color: #e53935;
	border-bottom-color: #e53935;
}

.material-content {
	background-color: #f8f9fa;
	padding: 30rpx;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
}

.material-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

.copy-material-button {
	background: linear-gradient(to right, #ff9a44, #ff5f6d);
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 20rpx 40rpx;
	font-size: 28rpx;
	font-weight: bold;
	width: 100%;
}

.poster-preview {
	text-align: center;
	margin-bottom: 20rpx;
}

.poster-image {
	width: 100%;
	max-width: 500rpx;
	height: auto;
	border-radius: 15rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.poster-actions {
	display: flex;
	gap: 20rpx;
}

.poster-btn {
	flex: 1;
	background-color: #f0f0f0;
	color: #333;
	border: none;
	border-radius: 10rpx;
	padding: 20rpx;
	font-size: 28rpx;
}

.earnings-list {
	max-height: 400rpx;
	overflow-y: auto;
}

.earnings-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.earnings-item:last-child {
	border-bottom: none;
}

.earnings-info {
	flex: 1;
}

.earnings-title {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.earnings-time {
	font-size: 24rpx;
	color: #999;
}

.earnings-amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #e53935;
}

.earnings-amount.positive {
	color: #27ae60;
}

.popup-content {
	background-color: white;
	padding: 60rpx 40rpx;
	border-radius: 20rpx;
	width: 600rpx;
}

.popup-title {
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
	color: #333;
}

.popup-balance {
	text-align: center;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #666;
}

.popup-input {
	width: 100%;
	padding: 20rpx;
	border: 2rpx solid #ddd;
	border-radius: 10rpx;
	font-size: 28rpx;
	margin-bottom: 10rpx;
}

.popup-tips {
	text-align: center;
	margin-bottom: 30rpx;
	font-size: 24rpx;
	color: #999;
}

.popup-buttons {
	display: flex;
	gap: 20rpx;
}

.popup-button {
	flex: 1;
	padding: 20rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	border: none;
}

.popup-button.cancel {
	background-color: #f0f0f0;
	color: #666;
}

.popup-button.confirm {
	background: linear-gradient(to right, #ff9a44, #ff5f6d);
	color: white;
}
</style> 